<template>
	<div class='palyItem'>
		<div class='top'>
			<!-- <div class='back' @click='back()'>
				<u-icon name="play-left-fill" color="#FFFFFF" size="24"></u-icon>
				<p>返回活动主页</p>
			</div> -->
			<p class='id'>@5654134</p>
			<p class='title'>{{PlayerItem.name}}</p>
			<!-- <div class='schoolbox'>
				<div class='left'>
					<image :src="PlayerItem.schoolurl" mode="" class='schoolimg'></image>
					<span class='shcoolname'>{{PlayerItem.school}}</span>
				</div>
				<div class='right'>
					<div class='number'>
						<p>{{PlayerItem.view}}观看</p>
					</div>
					<div class='number'>
						<p>{{PlayerItem.vote}}投票</p>
					</div>
				</div>
			</div> -->

		</div>
		<div class='playbox'>
			<video ref='myVideo' id="myVideo" :src="PlayerItem.videosrc" @error="videoErrorCallback" enable-danmu
				danmu-btn controls style="width: 100%;height: 100%;" :autoplay='autoplay' :poster='PlayerItem.poster'
				:show-center-play-btn='showplaybtn' :enable-play-gesture='enableplaygesture' @play='play' @pause='pause'
				@ended='ended'></video>
			<image src="https://cdn.img.up678.com/ueditor/upload/image/20211116/1637029270675001981.png" mode=""
				class='pause' v-if="!showpause" @click="handleplay"></image>
		</div>
		<!-- <div class='containerbox'>
			<div class='commentcontainer'>
				<fc-bubbles click v-for="(item,index) in PlayerItem.comment">
					<p class='item' @click='handlecomment(item)' :class="item.active?'active':''">
						{{`${item.title} ${item.number}`}}个赞
					</p>
				</fc-bubbles>
			</div>
		</div> -->
		<!-- <div class='footer'>
			<div class='share'>
				分享
			</div>
			<div class='vote'>
				投TA一票
			</div>
		</div>
		<div class='more'>
			滑动查看下一个
		</div> -->
	</div>
</template>

<script>
	export default {
		name: 'Videos3',
		props: {
			PlayerItem: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				autoplay: false,
				showplaybtn: false,
				enableplaygesture: true,
				showpause: false,
				bubblesactive: false,
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			play() {
				this.showpause = true
			},
			pause() {
				this.showpause = false
			},
			ended() {
				this.showpause = false
			},
			handleplay() {
				this.$refs['myVideo'].play()
			},
			// 选择评论条目
			// handlecomment(item) {
			// 	this.PlayerItem.comment.map((items) => {
			// 		if (items.id === item.id) {
			// 			if (items.active === true) {
			// 				items.active = false
			// 			} else {
			// 				items.active = true
			// 			}
			// 		}
			// 	})
			// },
			// 返回上一页
			back() {
				this.$emit('back')
			},
			// 外部滑动控制播放暂停
			outplay() {
				this.$refs['myVideo'].play()
			},
			outpause() {
				this.$refs['myVideo'].pause()
			}
		}
	}
</script>

<style lang="stylus" scoped>
	fc-bubbles {
		--color: #63a6ff;
	}

	.palyItem {
		width 100%;
		height 100vh;
		background: #0C0745;

		.top {
			height 155px;
			padding 14px 20px;
			// background url('https://cdn.img.up678.com/ueditor/upload/image/20211116/1637025961257096818.png') center /100% 100%;
			box-sizing border-box;

			.back {
				width: 125px;
				height: 31px;
				border-radius: 16px;
				border: 1px solid #FFFFFF;
				display flex;
				justify-content center;
				align-items center;
				box-sizing border-box;

				p {
					height: 12px;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 12px;
					margin-left 7px;
				}
			}

			.id {
				width: 70px;
				height: 12px;
				font-size: 15px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 12px;
				// margin 19px 0 12px 0;
				position: fixed;
				bottom: 120rpx;
				left: 20rpx;
			}

			.title {
				width: 60%;
				height: 20px;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				color: #FFFFFF;
				line-height: 18px;
				position: fixed;
				bottom: 50rpx;
				left: 20rpx;
			}

			.schoolbox {
				display flex;
				justify-content space-between;
				align-items center;
				margin 13px 0 0 0;

				.left {
					display flex;
					align-items center;

					.schoolimg {
						display block;
						width 26px;
						height 26px;
						margin-right 8px;
						border-radius 50%;
					}

					.shcoolname {
						height: 14px;
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 14px;
					}
				}

				.right {
					display flex;
					align-items center;

					.number {
						height: 18px;
						line-height 18px;
						background: rgba(255, 255, 255, 0.3);
						border-radius: 4px;
						margin-left 5px;
						padding 2px 5px;

						p {
							height: 18px;
							line-height 18px;
							text-align center;
							font-size: 10px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(255, 255, 255, 0.3);
						}
					}
				}
			}
		}

		.playbox {
			width 100%;
			height 260px;
			position relative;

			.pause {
				display block;
				width 52px;
				height 52px;
				position absolute;
				left 50% ;
				top 50%;
				transform translate(-26px, -26px)
			}
		}

		.containerbox {
			width 100%;
			padding 20px 30px 0px 30px;
			box-sizing border-box;

			.commentcontainer {
				width 100%;
				display flex;
				flex-wrap wrap;
				border-bottom 1px dashed #fff;
				padding-bottom 10px;

				.item {
					padding 7px 10px;
					text-align center;
					background: #F6F8FF;
					border-radius: 16px;
					height: 10px;
					font-size: 10px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #241D4A;
					line-height: 10px;
					margin-right 10px;
					margin-bottom 10px;
				}

				.active {
					background: #63A6FF;
					color #fff
				}
			}
		}

		.footer {
			display flex;
			justify-content center;
			align-items center;
			margin-top 28px;
			margin-bottom 28px;

			.share {
				text-align center;
				width: 56px;
				height: 34px;
				background: #FFFFFF;
				border-radius: 17px;
				border: 1px solid #0E0E63;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #241D4A;
				line-height: 34px;
				margin-right 10px;
			}

			.vote {
				text-align center;
				width: 93px;
				height: 34px;
				background: linear-gradient(180deg, #8152E2 0%, #3D29C0 100%);
				border-radius: 17px;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 34px;
			}
		}

		.more {
			width 100%;
			text-align center;
			height: 14px;
			font-size: 10px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #918CCC;
			line-height: 14px;
		}
	}
</style>
